<template>
    <div>
        <section class="content-header clearfix">
            统计分析
            <span>&nbsp;&nbsp;>&nbsp;&nbsp;</span>按月环比
        </section>
        <section class="content-main clearfix">
            <div class="col-sm-4 clearfix">
                <label class="col-sm-3 control-label">创建时间：</label>
                <div class="col-sm-4">
                    <input type="text" class="form-control pull-right" id="datepicker1" @mousedown="selectDate1" placeholder="YYYY-MM" v-model="everyMonthEventOut.eventTimeStart">
                </div>
                <div class="col-sm-1" style="height:34px;line-height:34px">--

                </div>
                <div class="col-sm-4">
                    <input type="text" class="form-control pull-right" id="datepicker2" @mousedown="selectDate2" placeholder="YYYY-MM" v-model="everyMonthEventOut.eventTimeEnd">
                </div>
            </div>
            <div class="col-sm-4 clearfix">
                <div class="col-sm-6 clearfix">
                    <orderArea v-model="everyMonthEventOut.eventArea" />
                </div>
                <div class="col-sm-6 clearfix">
                    <orderType v-model="everyMonthEventOut.eventSort" />
                </div>
            </div>
            <div class="col-sm-4 clearfix">
                <div class="col-sm-2 col-sm-offset-1">
                    <button type="button" class="btn btn-primary" @click="select">查询</button>
                </div>
                <div class="col-sm-2 col-sm-offset-7">
                    <button type="button" class="btn btn-primary" @click="monthOut">导出</button>
                </div>
            </div>
        </section>
        <section>
            <div id="echartContainer" style="width:100%; height:500px"></div>
        </section>
    </div>
</template>

<script>
import orderType from "@/components/common/orderType.vue";
import orderArea from "@/components/common/orderArea.vue";

export default {
    data() {
        return {
            everyMonthEventData: [],
            yearData: [],
            everyMonthEventOut: {
                eventArea: "",
                eventSort: "",
                eventTimeStart: this.nowDate(-365),
                eventTimeEnd: this.nowDate(0)
            }
        };
    },
    components: {
        orderType,
        orderArea
    },
    mounted() {
        this.select()
    },
    methods: {
        nowDate(AddDayCount) {
            var dd = new Date();
            dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期 
            var y = dd.getFullYear();
            var m = dd.getMonth() + 1;
            if (m < 10) m = "0" + m;
            return y + "-" + m ;
        },
        selectDate1() {
            $("#datepicker1")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm",
                    startView: 'year',
                    minView: 'year',
                })
                .on("changeDate", ev => {
                    this.everyMonthEventOut.eventTimeStart = ev.target.value;
                });
        },
        selectDate2() {
            $("#datepicker2")
                .datetimepicker({
                    autoclose: true,
                    format: "yyyy-mm",
                    startView: 'year',
                    minView: 'year',
                })
                .on("changeDate", ev => {
                    this.everyMonthEventOut.eventTimeEnd = ev.target.value;
                });
        },
        getEveryMonthEvent(callback) {
            this.$api.tongji.home.everyMonthEvent(this.everyMonthEventOut).then(res => {
                if (res.success) {
                    console.log(res);
                    this.yearData = res.data.everyMonth
                    this.everyMonthEventData = res.data.everyMonthEvent;
                    callback();
                }
            });
        },
        monthOut() {
            console.log(this.everyMonthEventOut);
            this.$api.tongji.home
                .everyMonthEventOut(this.everyMonthEventOut)
                .then(res => {
                    if (res.success) {
                        console.log(res);
                    }
                });
        },
        select() {
            let myChart = echarts.init(document.getElementById("echartContainer"));
            this.getEveryMonthEvent(() => {
                myChart.setOption({
                    tooltip: {},
                    xAxis: {
                        type: "category",
                        data: this.yearData
                    },
                    yAxis: {
                        type: "value",
                        axisLabel: {
                            formatter: "{value} 个"
                        }
                    },
                    series: [
                        {
                            data: this.everyMonthEventData,
                            type: "line",
                            itemStyle: {
                                normal: {
                                    color: "#3c8dbc"
                                }
                            }
                        }
                    ]
                });
            });
        }
    }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content-header {
  label,
  input,
  select,
  button {
    height: 34px;
    line-height: 34px;
    border-radius: 5px;
  }
  select,
  button {
    padding: 0px;
  }
  .col-sm-4,
  .col-sm-3,
  .col-sm-1,
  .col-sm-6,
  .col-sm-8 {
    padding: 0;
    text-align: center;
  }
}
</style>
